<template>
    <!--    <el-dropdown style="width:200px; cursor:pointer">-->
    <!--        <span>{{name}}</span><i class="el-icon-arrow-down"></i>-->
    <!--        <el-dropdown-menu  style="width: 100px;" slot="dropdown">-->
    <!--            <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>-->
    <!--            <el-dropdown-item @click.native="cancel()">注销</el-dropdown-item>-->
    <!--        </el-dropdown-menu>-->
    <!--    </el-dropdown>-->

    <!--Header-->
    <el-header style="display: flex; flex-wrap: nowrap; align-items: center;">
        <!--        <el-breadcrumb separator-class="el-icon-arrow-right">-->
        <!--            <el-breadcrumb-item replace :to="{ path:'/home/view' }">系统首页</el-breadcrumb-item>-->
        <!--            <el-breadcrumb-item replace :to="{ path: '/' }">活动管理</el-breadcrumb-item>-->
        <!--        </el-breadcrumb>-->
        <h2>欢迎: {{name}}</h2>
        <el-dropdown style="display: flex; align-items: center; justify-content: flex-end;">
            <el-avatar icon="el-icon-user-solid"></el-avatar>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="sysLogout()">退出</el-dropdown-item>
                <el-dropdown-item @click.native="sysCancel()">注销</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </el-header>


</template>
<script>
    import webSetInfo from "../server/webSetInfo";

    export default {
        name: "Header",
        props: {
            name: String
        },
        methods: {
            handleClick(action) {
                console.log("handleClick>>>>" + action )
                if (action == 'sysLogout') {
                    this.sysLogout();
                }
                if (action == 'sysCancel') {
                    this.sysCancel();
                }
            },

            sysLogout() {
                // this.$store.commit('setUserLoginStatus',{status:'false'})
                // this.$store.commit('setUserAllInfos',{})
                // this.$store.commit('setUserMenus',{menus: []})
                // this.$router.push('/login')
                // this.$message({
                //     type: 'success',
                //     message: '登出成功!'
                // });

                console.log("logout>>>>", )
                this.$axios_token({
                    url: `${webSetInfo.apiUrl}` + '/user/logout',
                    method: "get",
                    data: {}
                })
                    .then(res => {
                        this.$message.success("退出成功");
                        this.$router.push("/login");
                    })
            },

            sysCancel() {
                this.$axios_token({
                    url: `${webSetInfo.apiUrl}` + '/user/cancelUser',
                    method: "post",
                    data: {}
                })
                    .then(res => {
                        this.$message.success("注销成功");
                        localStorage.removeItem('userAllInfos')
                        this.$router.push("/login");
                    })
            }
        }
    }
</script>

<style>
    /*.el-breadcrumb__inner:before {*/
    /*    font-family: "Font Awesome 5 Free";*/
    /*    content: "\f015";*/
    /*    margin-right: 8px; !* 根据需要调整间距 *!*/
    /*}*/
</style>
